<template>
  <div class="main">
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="height: 45px">
        <el-breadcrumb-item :to="{path:'/'}">
          <span>首页</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>活动审核</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 筛选区域 -->
      <div class="screening">
        <el-radio-group v-model="queryInfo.state" size="small" fill="#3a7e59" @change="handleQueryChange">
          <el-radio-button label="1">未审核</el-radio-button>
          <el-radio-button label="2">已通过</el-radio-button>
          <el-radio-button label="3">已驳回</el-radio-button>
          <el-radio-button label="4">已终止</el-radio-button>
        </el-radio-group>
        <el-select v-model="queryInfo.collegeId"
                   placeholder="筛选学院"
                   size="small"
                   clearable
                   @change="handleQueryChange()"
                   style="margin-left: 20px">
          <el-option
              v-for="item in collegeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
        <!-- 搜索框 -->
        <el-select v-model="queryInfo.activityId"
                   placeholder="筛选活动"
                   size="small"
                   clearable
                   @change="handleQueryChange()"
                   style="margin-left: 20px">
          <el-option
              v-for="item in activityList"
              :key="item.id"
              :label="item.title"
              :value="item.id">
          </el-option>
        </el-select>
      </div>


      <!-- 活动信息 -->
      <el-table
          :stripe="true"
          :data="activitySignups"
      >
        <el-table-column
            type="expand"
            width="70"
        >
          <template v-slot="props">
            <el-form label-position="left" inline class="table-expand">
              <el-form-item label="目前状态"><span v-html="states[props.row.status]"></span></el-form-item>
              <el-form-item label="队伍"><span>{{ props.row.name }}</span></el-form-item>
              <el-form-item label="队长">
                <el-popover
                    placement="bottom-start"
                    trigger="hover"
                >
                  <div class="popover">
                    <div class="row"><label>姓名</label>{{ props.row.captain.name }}</div>
                    <div class="row"><label>学号</label>{{ props.row.captain.userId }}</div>
                    <div class="row"><label>学院</label>{{ collegeMap[props.row.captain.collegeId] }}</div>
                    <div class="row"><label>专业</label>{{ majorMap[props.row.captain.majorId] }}</div>
                  </div>
                  <el-tag slot="reference" size="small" class="teacher">{{ props.row.captain.name }}</el-tag>
                </el-popover>
              </el-form-item>
              <el-form-item v-if="strExists(props.row.teacher)" label="指导教师">
                <el-popover
                    placement="bottom-start"
                    trigger="hover"
                >
                  <div class="popover">
                    <div class="row"><label>姓名</label>{{ props.row.teacher.name }}</div>
                    <div class="row"><label>职工号</label>{{ props.row.teacher.userId }}</div>
                    <div class="row"><label>学院</label>{{ collegeMap[props.row.teacher.college] }}</div>
                  </div>
                  <el-tag slot="reference" size="small" class="teacher">刘大壮</el-tag>
                </el-popover>
              </el-form-item>
              <el-form-item label="队伍成员">
                <el-popover
                    v-for="(member, index) in props.row.students"
                    :key="index"
                    placement="bottom-start"
                    trigger="hover"
                >
                  <el-tag
                      slot="reference"
                      size="small"
                      type="success"
                      :disable-transitions="false"
                      style="margin-right: 10px; z-index: 90"
                  >{{ member.name }}
                  </el-tag>
                  <div class="popover">
                    <div class="row"><label>姓名</label>{{ member.name }}</div>
                    <div class="row"><label>学号</label>{{ member.userId }}</div>
                    <div class="row"><label>学院</label>{{ collegeMap[member.collegeId] }}</div>
                    <div class="row"><label>专业</label>{{ majorMap[member.majorId] }}</div>
                  </div>
                </el-popover>
              </el-form-item>
              <el-form-item label="报名时间"><span>{{ props.row.createTime }}</span></el-form-item>
              <!--            <el-form-item label="活动创建人"><span>{{props.row.createPerson}}</span></el-form-item>-->
              <el-form-item label="活动策划">
                <el-button type="info" plain size="mini"
                           @click="openDialog(props.row.plan)"
                >点击查看
                </el-button>
              </el-form-item>
              <el-form-item label="自定义问卷">
                <el-button type="info" plain size="mini"
                           @click="openQuesDialog(props.row.questionAnswer)"
                >点击查看
                </el-button>
              </el-form-item>
              <!-- 学院意见：活动状态>210 -->
              <el-form-item v-if="strExists(props.row.collegeOpinion) && props.row.state > 211" label="学院意见">
                {{ props.row.collegeOpinion }}
              </el-form-item>
              <!-- 学校意见：活动状态 > 220 -->
              <el-form-item v-if="strExists(props.row.universityOpinion) && props.row.state > 221 " label="学校意见">
                {{ props.row.universityOpinion }}
              </el-form-item>
              <el-form-item
                  v-if="optVisible(props.row.status)"
                  label="">
                <div class="audit">
                  <el-button type="success" size="mini"
                             @click="auditActivity(props.row, 1)"
                  >通过
                  </el-button>
                  <el-button type="warning" size="mini"
                             @click="auditActivity(props.row, 2)"
                  >驳回
                  </el-button>
                  <el-button type="danger" size="mini"
                             @click="auditActivity(props.row, 3)"
                  >终止
                  </el-button>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            type="index"
            label="#"
            width="50"
        />
        <el-table-column
            label="活动名称"
            prop="activityName"
            width="300"
        />
        <el-table-column
            label="队伍名称"
            prop="name"
        />
        <el-table-column
            label="队长"
            prop="captain.name"
        />
        <el-table-column
            label="指导教师"
            prop="teacher.name"
        />
      </el-table>
    </el-card>

    <!-- 策划详情 -->
    <el-dialog
        title="策划详情"
        :visible.sync="showPlanDialog"
        :modal-append-to-body="false"
        append-to-body

    >
      <show-activity-detail
          :detail="dialogPlan"
      />
    </el-dialog>

    <el-dialog
        title="自定义问卷回答详情"
        :visible.sync="quesDialogOpen"
        :modal-append-to-body="false"
        append-to-body
    >
      <div class="quesAndAns" v-for="idx in quesDialogInfo.questions.length" :key="idx">
        <span class="ques">{{idx}}. {{ quesDialogInfo.questions[idx - 1] }}</span>
        <span class="answer">{{ quesDialogInfo.answers[idx - 1] }}</span>
      </div>

    </el-dialog>


  </div>
</template>

<script>

import FakeCollegeList from "@/views/activity/Index_blogs/fakeCollegeList";
import FakeActivities from "@/views/activity/manage/fakeActivities";
import FakeActivitySignups from "@/views/activity/manage/fakeActivitySignups";
import CacheUtil from "@/utils/CacheUtil";
import ActivityStates from "@/views/activity/activityStates";
import RequestUtil from "@/utils/RequestUtil";
import ShowActivityDetail from "@/views/components/showActivityDetail";

export default {
  name: 'ActivityAudit',
  components: {ShowActivityDetail},
  data() {
    return {
      quesDialogOpen: false,
      quesDialogInfo: {
        questions: []
      },


      isUniversity: CacheUtil.isUniversity(),
      collegeList: [],
      activityList: [],
      activitySignups: [],
      states: ActivityStates.states,
      showPlanDialog: false,
      dialogPlan: {
        title: 'asdasd',
      },
      queryInfo: {
        keyword: '',
        pageSize: 5,
        pageNum: 1,
        collegeId: '',
        state: '1',
        activityId: '',
      },
      totalNum: 0,
      collegeMap: {},
      majorMap: {},
    }
  },
  activated() {
    this.getSignupList()
  },
  created() {
    RequestUtil.sendCacheableRequest("activityList", "/activity/all").then((activityList) => {
      this.activityList = activityList;
    })
    RequestUtil.sendCacheableRequest("collegeList", '/auth/getCollegeList').then(collegeList => {
      this.collegeList = collegeList;
      this.collegeMap = RequestUtil.listToMap(collegeList)
    })
    RequestUtil.sendCacheableRequest("majorList", '/auth/getMajorList').then(majorList => {
      this.majorMap = RequestUtil.listToMap(majorList)
    })
  },
  methods: {
    strExists(str) {
      return (typeof str !== 'undefined' && str !== null && str !== '');
    },
    handleQueryChange() {
      // console.log(this.queryInfo)
      this.getSignupList()
    },
    openQuesDialog(info) {
      this.quesDialogOpen = true;
      this.quesDialogInfo = info;
      // console.log("ttt", this.quesDialogInfo)
    },
    optVisible(state) {
      if (state >= 300 || state < 200) return false
      else if (CacheUtil.isCollege() && state === 211) return true
      else if (CacheUtil.isUniversity() && state === 221) return true
      else return false;
    },
    openDialog(plan) {
      // console.log("ppp", plan)
      let params = {
        content: plan.planContent,
        startTime: plan.planStartTime,
        endTime: plan.planEndTime
      }
      this.showPlanDialog = true
      this.dialogPlan = params

    },
    getSignupList() {
      this.$axios.get(`${this.HOST}/team/list`, {
        params: this.queryInfo
      }).then(res => {
        if (res.data.code === 200) {
          this.activitySignups = res.data.data.list
          this.totalNum = res.data.data.total
          // this.activitySignups.forEach(sigup => {
          //   signup.questionAnswer.forEach(item => {
          //     signup['ques'].push(item)
          //   })
          // })
        }
      })
    },
    auditActivity(signup, opt) {
      console.log(signup, opt)
      if (opt === 1) {
        this.$confirm('确认通过团队【' + signup.name + '】的报名申请吗？', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          // console.log("succ")
          this.sendAudit(signup, opt, "同意")
        }).catch(() => {
          // console.log("cancle")
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      } else if (opt === 2) {
        this.$prompt('确认驳回团队【' + signup.name + '】的报名申请吗？', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          inputPlaceholder: '请输入审核意见',
          type: 'warning'
        }).then(({value}) => {
          this.sendAudit(signup, opt, value)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      } else if (opt === 3) {
        this.$prompt('确认终止团队【' + signup.name + '】的报名申请吗？', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          inputPlaceholder: '请输入审核意见',
          inputPattern: /\\S+/,
          inputErrorMessage: '意见不能为空',
          type: 'error'
        }).then(({value}) => {
          console.log(value)
          this.sendAudit(signup, opt, value)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    },
    sendAudit(signup, opt, opinion) {
      this.$axios.post(`${this.HOST}/activity/audit`, {
        activityId: signup.activityId,
        pass: opt,
        teamId: signup.id,
        captainId: signup.captain.userId,
        captainName: signup.captain.name,
        opinion: opinion
      }).then(res => {
        // console.log("rrrrr", res)/\
        if (res.data.code === 200) {
          this.$message({
            message: '审核成功！',
            type: 'success'
          })
        }
      })
    }

  }
}
</script>

<style lang="less" scoped>

/deep/ .table-expand {
  padding-left: 50px;
  font-size: 0;
  display: flex;
  flex-direction: column;

  label {
    width: 90px;
    color: #99a9bf;
  }

  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    //width: 50%;
  }

  .el-tag {
    margin-right: 10px;
  }
}

/deep/ .el-form-item__content {
  width: 90%;
}

.audit {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}


.popover {
  .row {
    width: 200px;
    display: flex;

    label {
      display: block;
      color: #99a9bf;
      margin-bottom: 5px;
      width: 60px;
    }
  }
}

.quesAndAns {
  margin-top: 10px;

  .ques {
    display: block;
    //width: 100px;
    color: #99a9bf;
  }

  .answer {
    margin-left: 20px;
    font-weight: lighter;
  }
}


</style>
